<template>
    <div id = "background">
    <div class = "container">
            <div class = "header">
                注册
            </div>
            <div class = "form">
                <label>用户名：</label>
                <input type = "text" v-model.trim="name" class="input" @input="checkForm"><br/>
            </div>
            <div class = "form">
                <label>账户：</label>
                <input type = "text" v-model.trim="account" class="input" @input="checkForm"><br/>
            </div>
            <div class = "form">
                <label>密码：</label>
                <input type = "password" v-model.trim="password" class="input" @input="checkForm"><br/>
            </div>
            <div class = "form">
                <label>邮箱：</label>
                <input type = "email" v-model.trim="mail" class="input" @input="checkForm"><br/>
            </div>
            <div class = "form">
                <label>手机号：</label>
                <input type = "tel" v-model.trim="tel" class="input" @input="checkForm"><br/>
            </div>
            <div class="request">
            <input type = "checkbox" class = "choose" id="yes" value="0">
            <label for="yes">注册代表我已经同意协议</label>
            </div>
            
            
            <button :disabled="flag" class="btn" @click.prevent="handlefinish" >提交</button>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import axios from 'axios';
    export default{
        name:'register',
        props:{
            msg:String
        },
        data(){
            return{
                name:"",
                account:"",
                password:"",
                mail:"",
                tel:"",
                flag:true
            }
        },
        methods:{
            checkForm() {
                 if (this.name && this.password && this.mail && this.tel) {
                this.flag = false;  
             } else {
             this.flag = true;  
             }
         },
           handlefinish(){
            //console.log("123");
            const userData = {
                account: this.account,
                password: this.password,
                username: this.name,
                email: this.mail,
                phone: this.tel
            }
            
            axios.post('http://localhost:9001/MasterAccount/regist',userData).then(response =>{
                if(response.data){
                    alert("您已经注册成功")
                    this.$router.push('/')
                }else{
                    alert("账号已存在")
                }})
        }
        }
    }
</script>
<style scoped>
html{
    height: 100%;
}
#background {
  width: 100%;
  height: 100%;
  background: url("../images/微信图片_20240702112551.png") no-repeat center center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2; /* background 在底层 */
}
.choose {
    display: flex;
    align-items: center;
}

label[for="yes"] {
    display: inline-flex; /* Ensure label behaves as inline-flex */
    align-items: center; /* Align label vertically with checkbox */
    margin-left: 10px; /* Adjust spacing between checkbox and label */
    white-space: nowrap; /* Prevent label from wrapping to a new line */
}

.container {
    background-color: #00000090;
        width: 450px;
        height: 600px;
        border-radius: 15px;
        padding: 0 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
}
    
.form {
    /* display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    align-items: center; */
    color :white;
    margin-left: 20%;
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
    margin-top: 9px; /* 调整输入框和按钮之间的间距 */
}
    label{
        float: left;
        width: 5em;
        margin-right: 1em;
        text-align: right;
    }
    .header{
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        line-height: 150px;
        color: #fff;
    }
    .input{
        background-color: rgba(255, 255, 255, 0.5);
        display: block;
        width: 50%;
        margin-bottom: 0px;
        border: 0;
        padding: 10px;
        border-bottom: 1px solid rebeccapurple;
        font-size: 10px;
        outline: none;
    }
    .input::placeholder{
        text-transform: uppercase;
    }
    .btn{
        text-align: center;
        padding: 10px;
        margin: 0 auto;
        width: 40%;
        margin-top: 20px;
        display: block;
        background-image: linear-gradient(to right,#081731,#1212d7);
        color: #fff;
    }
    .msg{
        text-align: center;
        line-height: 88px;

    }
    a{
        text-decoration-line: none;
        color: #abc1ee;
    }
    .request {
    display: flex;
    align-items: center;
    margin-left: 20%; /* Adjust as needed */
    margin-top: 0px; /* Adjust vertical spacing */
    }
</style>